<template>
	<!-- 高度的设置：
	 以宽度为基准的1/2
	 图片的高度用内边距阔出来，（是原来的图片的一半）
	 -->
	<!-- 滑动总区域 -->
	<div class="header-swiper swiper-container">
		<!-- 该标签内所有的内容都属于触摸滑动效果 -->
		<!-- 滑动内容区域 -->
		<div class="swiper-wrapper">
			<!-- 滑动项区域 -->
			<div class="swiper-slide" v-for="(item,index) in swiperList" :key="item.id">
				<img :src="item.imgURL" />
			</div>
		</div>
	</div>
</template>

<script>
	//导入swiper插件
	import Swiper from 'swiper'
	export default {
		props:['swiperList'],
		data() {
			return {
				
			}
		},
		updated(){
			new Swiper('.header-swiper',{
				//重复轮播
				loop: true,
				observer:true,
				observeParents:true
			})
		}
	}
</script>

<style scoped>
	.swiper-container{
		width: 100%;
		height: 4.18rem;/*209px*/
	}
	.swiper-slide img{
		width: 100%;
		height: 100%;
	}
</style>
